<template>
	<div class="lz-header d-flex justify-content-between pl-3 pr-3 h-100">
		<div>
            <!-- <img src="./../assets/logo.png" alt="" class="h-100"> -->
        </div>
		<div class="d-flex">
			<!-- <div class="search">
				<el-input placeholder="输入身份证号码快速检索" size="small">
					<el-button slot="append" type="primary" icon="el-icon-search"></el-button>
				</el-input>
			</div> -->

            <!-- <div class="tip">
                <el-badge :value="0" class="ml-4">
                    <el-button circle size="small" icon="el-icon-bell" class="d-block"></el-button>
                </el-badge>
            </div> -->
			
			<div class="avatar ml-4">
				<el-dropdown trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						<img src="./../assets/logo.png" alt="">
						<span class="ml-3">{{userInfo.name}}</span>
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="logout">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

			</div>
		</div>
	</div>
</template>
<script>
import CookieNames from './../constant/CookieName';
import { mapState } from 'vuex';
	export default {
        name: 'Header',
        computed: {
            ...mapState({
                userInfo: 'userInfo'
            })
        },
        methods: {
            handleCommand(command){
                if( command === 'logout' ) this.toLogout();
            },
            toLogout(){
                Object.keys(CookieNames).forEach(key=>{
                    this.$cookie.set(CookieNames[key], '', -1);
                });
                this.$router.push({name: 'login'});
            }
        }
	}

</script>
<style lang="scss" scoped>
	.lz-header {
		line-height: 60px;
	}

	.avatar {
		img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid #ccc;
		}
        &:hover{
            cursor: pointer;
        }
	}

</style>
